<!-- Pre-populating start -->
<section id="pre-populating">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Pre-populating</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard">
                    <p>Below example shows how cell renderers can be used to present the template values for empty rows. When any cell in the empty row is edited, the onChange callback fills the row with the template values.</p>
                    <div class="table-responsive">
    				    <div id="populating" class="hot handsontable"></div>
                    </div>
    			</div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Pre-populating end -->